import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AssetTotalIcon from '../../images/icon/asset-total.png';
import AvailAssetTotalIcon from '../../images/icon/avail-asset-total.png';
import OnedayAffectTotalIcon from '../../images/icon/oneday-affect-total.png';
import VulTotalIcon from '../../images/icon/vul-total.png';
import './index.less';

class InfoReview extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { totalSites, totalVuls, siteWithVuls, availableSites } = this.props;
    const list = [
      {
        icon: AssetTotalIcon,
        desc: '资产总数',
        value: totalSites
      },
      {
        icon: AvailAssetTotalIcon,
        desc: '可用资产总数',
        value: availableSites
      },
      {
        icon: VulTotalIcon,
        desc: '存在漏洞总数',
        value: totalVuls
      },
      {
        icon: OnedayAffectTotalIcon,
        desc: '漏洞影响资产数',
        value: siteWithVuls
      }
    ];
    return (
      <div className="info-review">
        {list.map((item, index) => (
          <div key={index} className="item">
            <img className="icon" src={item.icon} />
            <div className="data">
              <div className="desc">{item.desc}</div>
              <div className="value">{item.value}</div>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

InfoReview.propTypes = {
  totalSites: PropTypes.number,
  totalVuls: PropTypes.number,
  siteWithVuls: PropTypes.number,
  availableSites: PropTypes.number
};

export default InfoReview;
